<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, reactive, ref, onUnmounted } from 'vue';
import { post } from '@/utils/request';
import { statistics } from '@/api/index';
const dataValue: any = ref({})
const timer: any = ref(null)
const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
const options = reactive({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}:{d}%',
    textStyle: { color: '#000' },
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
    borderColor: 'rgba(255, 255, 255, 1)',
  },
  legend: {
    bottom: '0',
    itemWidth: 9,
    itemHeight: 9,
    itemStyle: {
      borderRadius: '50%'
    },
    icon: 'circle',
    itemGap: 30,
    formatter: (name) => {
      const dataItem = options.series[0].data.find(item => item.name === name);
      if (dataItem) {
        // 使用富文本格式，分别设置 name 和 value 的样式
        return `{name|${name}} {value|${dataItem.value}%}`;
      } else {
        return name;
      }
    },
    textStyle: {
      color: 'rgba(255, 255, 255, 0.3545)',
      fontSize: 12,
      rich: {
        // 定义 name 的样式
        name: {
          color: 'rgba(255,255,255,0.3545)', // 白色
          fontSize: 12,
          fontWeight: 700,
          fontFamily: 'Lato, Lato'
        },
        // 定义 value 的样式
        value: {
          color: '#FFFFFF', // 黄色
          fontSize: 14,
          fontWeight: 400,
        },
      },
    },
    // textStyle: { color: 'rgba(255,255,255,0.3545)', fontSize: 12 }
  },
  series: [{
    name: '运输状态', // 添加系列名称
    type: 'pie',
    center: ['50%', '40%'],
    radius: ['30%', '70%'],
    minAngle: 10,
    avoidLabelOverlap: true,
    roseType: 'radius',
    itemStyle: {
      color: (params: any) => {
        return colorList.slice(2)[params.dataIndex]
      }
    },
    label: {
      show: true,  // 确保标签显示
      formatter: '{b}: {d}%',  // 可以自定义标签格式
      color: 'auto'
    },
    emphasis: {  // 添加高亮样式
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: '#fff'
      },
      label: {
        show: true
      }
    },
    data: dataValue.value
  }]
})
const getList = async () => {
  try {
    const res: any = await post(statistics.ailingState)
    if (res.code === '0000') {
      console.log(res.data, '运单运输状态统计数据')
      dataValue.value = [{
        name: '已送达',
        value: res.data.ysdNum
      }, {
        name: '派送中',
        value: res.data.pszNum
      }, {
        name: '已到站',
        value: res.data.dzNum
      }, {
        name: '已签收',
        value: res.data.yqsNum
      }]
      options.series[0].data = dataValue.value;
    }
  } catch (error) {

  }
}
onMounted(() => {
  getList()
  // 每5分钟刷新一次
  timer.value = setInterval(() => {
    getList()
  }, 300000);
})
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
})

</script>

<template>
  <div class="right-center flex flex-col">
    <div class="title w-full h-[40px] flex items-center pl-[12px] pr-[14px] mb-[20px] justify-between">
      运单运输状态统计
      <img src="@/assets/img/content-img/title-point-left-top.png" alt="" class="title-opint w-[12px] h-[12px]">
    </div>
    <!-- echarts 饼图 -->
    <div class="content w-full h-[calc(100%-60px)]">
      <echart :options="options" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.right-center {
  border: 1px solid rgba(97, 145, 236, 0.3);
  background: rgba(15, 23, 52, 0.5);
  border-radius: 4px;
  overflow: hidden;
}

.title {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 700;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 20px;
  text-shadow: 0px 0px 8px rgba(2, 3, 7, 0.35);
  text-align: left;
  font-style: normal;
  text-transform: none;
  border-left: 7px solid #6191EC;
  background-image: url('@/assets/img/content-img/title-background-left-top.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.content {
  position: relative;
  width: 100%;
  height: calc(100% - 60px);
  padding: 10px;
}

/* 饼图动画效果 */
@keyframes pieAnimation {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.content>div {
  animation: pieAnimation 0.8s ease-out forwards;
}
</style>
